<template>
  <div class="app-container">
    <Header @toggle-dropdown="toggleDropdown" />
    <div class="main-content">
      <Sidebar />
      <div class="content-wrapper">
        <router-view />
      </div>
    </div>
    <Footer />
    <AdminDropdown
        v-if="showDropdown"
        @close="closeDropdown"
        @logout="handleLogout"
        @change-password="handleChangePassword"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Header from '@/components/Layout/Header.vue';
import Sidebar from '@/components/Layout/Sidebar.vue';
import Footer from '@/components/Layout/Footer.vue';
import AdminDropdown from '@/components/Layout/AdminDropdown.vue';
import {useRouter} from "vue-router";

const showDropdown = ref(false);

const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value;
};

const closeDropdown = () => {
  showDropdown.value = false;
};

const handleLogout = () => {
  // 处理退出登录逻辑
  console.log('执行退出登录');
  closeDropdown();
};

const handleChangePassword = () => {
  // 处理修改密码逻辑
  console.log('打开修改密码弹窗');
  closeDropdown();
};
// 可在此处添加数据请求逻辑（如从API获取统计值）
// import HomeView from "@/views/Home/HomeView.vue";
// import Homeview from "@/views/Home/HomeView.vue";
// export default {
//   components:{
//     HomeView
//   }
// }
// import Sidebar from "@/components/Layout/Sidebar.vue";
// import Footer from "@/components/Layout/Footer.vue";
// import Header from "@/components/Layout/Header.vue";
// import AdminDropdown from "@/components/Layout/AdminDropdown.vue";
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  background: #f0f2f5;
}
</style>